import {
    Animated,
    View,
    Button,
    StyleSheet,
    Text,
    ScrollView,
  } from 'react-native';
  import React, {useRef, useState} from 'react';
  import {TestCase, TestSuite, Tester} from '@rnoh/testerino';
  import ConfettiCannon from 'react-native-confetti-cannon';
  
  type Origin = {
    x: number;
    y: number;
  };
  
  export function AutoStartFalse() {
    const $ref = useRef<any>();
    const [isResume, setIsResume] = useState<boolean>(false);
    const [isStart, setIsStart] = useState<boolean>(false);
    const [isStop, setIsStop] = useState<boolean>(false);
    const [isEnd, setIsEnd] = useState<boolean>(false);
  
    const [isResumeText, setIsResumeText] = useState<string>('');
    const [isStartText, setIsStartText] = useState<string>('');
    const [isStopText, setIsStopText] = useState<string>('');
    const [isEndText, setIsEndText] = useState<string>('');
  
    const [count, setCount] = useState(50);
    const [origin, setOrigin] = useState<Origin>({x: -10, y: -10});
    const [explosionSpeed, setExplosionSpeed] = useState(1000);
    const [fallSpeed, setFallSpeed] = useState(1000);
    const [fadeOut, setFadeOut] = useState(false);
    const [colors, setColors] = useState<string[] | undefined>();
    const [autoStart, setAutoStart] = useState(false);
    const [autoStartDelay, setAutoStartDelay] = useState(10);
  
    return (
      <View style={{position: 'relative'}}>
        <View pointerEvents="none" style={styles.box}>
          <ConfettiCannon
            count={count}
            origin={origin}
            explosionSpeed={explosionSpeed}
            fallSpeed={fallSpeed}
            fadeOut={fadeOut}
            colors={colors}
            autoStart={autoStart}
            autoStartDelay={autoStartDelay}
            onAnimationStart={() => {
              setIsStart(true);
              setIsEnd(false);
              setIsStartText('pass');
            }}
            onAnimationStop={() => {
              if (isStart) {
                setIsStop(true);
                setIsStopText('pass');
              }
            }}
            onAnimationResume={() => {
              setIsResume(true);
              setIsResumeText('pass');
            }}
            onAnimationEnd={() => {
              setIsStart(false);
              setIsStop(false);
              setIsResume(false);
              setIsEnd(true);
              setIsEndText('pass');
            }}
            testID="123"
            ref={$ref}
          />
        </View>
        <View style={styles.container}>
          <ScrollView style={{height: '80%'}}>
            <Tester>
              <TestSuite name="react-native-confetti-cannon">
                <TestCase
                  itShould={'不自动启动 autoStart  false'}
                  initialState={false}
                  assert={({expect, state}) => {
                    expect(state).to.be.true;
                  }}
                  arrange={({setState}) => (
                    <Text>{'不自动启动 autoStart  false'}</Text>
                  )}></TestCase>
              </TestSuite>
            </Tester>
          </ScrollView>
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      position: 'absolute',
      top: '10%',
      height: '80%',
    },
    box: {
      position: 'relative',
      zIndex: 2,
      width: '100%',
      height: '100%',
    },
  });
